<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core">

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	 <meta name="viewport" content="width=device-width, initial-scale=1"/>
	<link rel="shortcut icon" href="/#{lang['web.nameproject']}/images/web/icon-uit.ico" />
	
	<!-- Begin CSS -->
		<link rel="stylesheet" type="text/css" href="/#{lang['web.nameproject']}/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="/#{lang['web.nameproject']}/css/reset.css" />
		<link rel="stylesheet" type="text/css" href="/#{lang['web.nameproject']}/css/style.css" />
		<!-- CSS chomàn hình máy tính -->
		<link rel="stylesheet" media="only screen and (min-width : 1025px)" href="/#{lang['web.nameproject']}/css/style-pc.css" />
		
		<!-- CSS cho màn hình máy tính bảng tablet (chiều ngang - landspace) -->
		<link rel="stylesheet" media="only screen and (min-width : 768px) and (max-width : 1024px)" href="/#{lang['web.nameproject']}/css/style-tablet.css" />
		
		<!-- CSS cho màn hình máy tính bảng tablet (chiều dọc - portrait) -->
		<link rel="stylesheet" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)" href="/#{lang['web.nameproject']}/css/style-tablet.css" />
		
		<!-- CSS cho màn hình điện thoại (chiều ngang - landspace) -->
		<link rel="stylesheet" media="only screen and (min-width : 321px) and (max-width : 760px)" href="/#{lang['web.nameproject']}/css/style-phone.css" />
		
		<!-- CSS cho màn hình điện thoại smartphone (chiều dọc - portrait) -->
		<link rel="stylesheet" media="only screen and (max-width : 320px)" href="/#{lang['web.nameproject']}/css/style-phone.css" />
	<!--End CSS -->
	<!-- JavaScript - Jquery -->
		<!-- Go to www.addthis.com/dashboard to customize your tools -->
		<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-543f54ae420abc81"></script>
		<script src="/#{lang['web.nameproject']}/js/jquery.js"></script>
		<script src="/#{lang['web.nameproject']}/js/bootstrap.min.js"></script>
		<script src="https://apis.google.com/js/plusone.js"></script>
	<!--End JavaScript - Jquery -->
</h:head>

<h:body>
	<p:growl autoUpdate="true"></p:growl>
	<p:messages showDetail="false" autoUpdate="true" closable="true"  style="display:none;"/>
	<f:view locale="#{sessionWeb.locale}"></f:view>
	<!-- Header -->
	<ui:insert name="header">
		<ui:include src="../common/commonHeader.xhtml"></ui:include>
	</ui:insert>
	
	<!-- Content -->
	<div class="content">
		<ui:insert name="content">
		</ui:insert>
	</div>
	
	<!-- Footer -->
	<ui:insert name="footer">
		<ui:include src="../common/commonFooter.xhtml"></ui:include>
	</ui:insert>
</h:body>
</html>